<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>单页面应用</title>
	<script src="js/vue.js"></script>
	<script src="js/vue-router.js"></script>
	<link rel="stylesheet" href="assets/css/bootstrap.css" />
	<link rel="stylesheet" href="assets/css/custom.css" />
</head>
<body>
	<div id="app">
		<div class="row">
			<div class="col-xs-offset-2 col-xs-8">
				<div class="page-header">
					<h2>Router Basic - 01</h2>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-2 col-xs-offset-2">
				<div class="list-group">
					<!--使用指令v-link进行导航-->
					<a class="list-group-item" v-link="{ path: '/home'}">Home</a>
					<a class="list-group-item" v-link="{ path: '/about'}">About</a>
				</div>
			</div>
			<div class="col-xs-6">
				<div class="panel">
					<div class="panel-body">
						<!--用于渲染匹配的组件-->
						<router-view></router-view>
					</div>
				</div>
			</div>
		</div>
	</div>
	<template id="home">
		<div>
			<h1>Home</h1>
			<p>{{msg}}</p>
		</div>
	</template>
	<template id="about">
		<div>
			<h1>About</h1>
			<p>关于我们</p>
		</div>
	</template>
</body>

<script>
	var router = new VueRouter();
	//创建组件构造器
	var Home = Vue.extend(
		{
			template: '<div><h1>Home</h1><p>{{msg}}</p></div>',
			data: function () {
				return {
					msg: '网站首页'
				}
			}
		}
	);
	
	var About = Vue.extend(
		{
			template: '<div><h1>About</h1><p>{{msg}}</p></div>',
			data: function () {
				return {
					msg: '关于我们'
				}
			}
		}
	);

	router.map({
		'/home': { component: Home },
		'/about': { component: About }
	});

	var App=Vue.extend({})
	router.start(App,"#app");
</script>
</html>
